<template>
	<view class="login">
		<view class="mask">
			<view class="input-box">
				<text class="title">账号</text>
				<input v-model="username" type="text" class="input" placeholder="请输入账号" />
				<text class="title">密码</text>
				<input v-model="password" type="password" class="input" placeholder="请输入密码" />
				<image class="cooker" src="../../static/cooker.png" mode="aspectFit"></image>
				<text class="title">验证码</text>
				<label class="input verification">
					<input v-model="captcha" type="text" class="verification-input" placeholder="请输入验证码" />
					<image @click="getCode()" :src="captchaImage" mode="heightFix" class="verification-image"></image>
				</label>
			</view>
			<view class="button" @click="login()">
				<text>立即登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				captcha: '',
				captchaImage: ''
			}
		},
		onLoad() {
			this.getCode()
		},
		methods: {
			login() {
				if (!this.username) {
					uni.showToast({
						title: '请输入账号',
						icon: 'none'
					})
					return
				}
				if (!this.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				}
				if (!this.captcha) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				this.$api.login({
					username: this.username,
					password: this.password,
					captcha: this.captcha
				})
				.then(res => {
					let { data, code, msg } = res.data
					if (data) {
						uni.setStorageSync('info', data)
						uni.showToast({
							ttitle: '登录成功',
							icon: 'none'
						})
						document.documentElement.requestFullscreen()
						uni.navigateTo({
							url: './cart'
						})
					} else {
						uni.showToast({
							title: msg,
							icon: 'none'
						})
					}
					if (code != 0) this.getCode()
				})
			},
			getCode() {
				if (this.captchaImage) URL.revokeObjectURL(this.captchaImage)
				this.$api.getCode()
				.then(res => {
					let { data } = res
					if (data) {
						const blob = new Blob([data], { type: 'image/gif' })
						this.captchaImage = URL.createObjectURL(blob)
					}
				})
			}
		}
	}
</script>

<style scoped>
	body {
		background-image: url(../../static/bg.svg);
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: bottom center;
	}
	
	.login {}
	
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .4);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.input-box {
		display: flex;
		flex-direction: column;
		position: relative;
		padding-bottom: calc(var(--base) * 40);
	}
	
	.title {
		font-size: calc(var(--base) * 24);
		font-weight: bold;
		color: #fff;
		padding-bottom: calc(var(--base) * 16);
	}
	
	.title:nth-child(3),
	.title:nth-child(6) {
		padding-top: calc(var(--base) * 30);
	}
	
	.input {
		box-sizing: border-box;
		background: #fff;
		--edge: calc(var(--base) * 150);
		width: calc(100vw - (var(--edge) * 2));
		height: calc(var(--base) * 50);
		padding: 0 calc(var(--base) * 18);
		border: 1px solid #1890ff;
		font-size: calc(var(--base) * 16);
	}
	
	.cooker {
		position: absolute;
		--width: 164;
		--height: 258;
		top: calc(var(--base) * calc(-258 + 32));
		left: calc(var(--base) * calc(-164 + 38));
		width: calc(var(--base) * var(--width));
		height: calc(var(--base) * var(--height));
	}
	
	.verification {
		display: flex;
		flex-direction: row;
	}
	
	.verification-input {
		height: 100%;
		flex: 1;
	}
	
	.verification-image {
		height: 90%;
		align-self: center;
		padding-left: calc(var(--base) * 10);
	}
	
	.button {
		width: calc(100vw - (calc(var(--base) * 137) * 2));
		height: calc(var(--base) * 53);
		background: #1890ff;
		border-radius: calc(calc(var(--base) * 53) / 2);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: calc(var(--base) * 18);
		font-weight: bold;
		color: #fff;
	}
</style>
